/* @author yanjun
 * @date 2018.09
*/
:global {
  html {
    min-height: 100%;
    min-width: 100%;
    body {
      &.user-select-none {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
      .transform-box {
        display: inline-block;
        transition: translate 5ms;
        overflow: hidden;
      }
      .zoomable-box {
        overflow: hidden;
        position: relative;
        .zoom-bar {
          position: absolute;
          overflow: hidden;
          background: #f2f2f2;
          &.top-bar {
            left: 0;
            top: 0;
            height: 2px;
            width: 100% !important;
            cursor: ns-resize;
          }
          &.right-top-bar {
            right: 0;
            top: 0;
            height: 3px;
            width: 3px;
            cursor: nesw-resize;
            z-index: 2;
          }
          &.right-bar {
            right: 0;
            top: 0;
            height: 100% !important;
            width: 2px;
            cursor: ew-resize;
          }
          &.right-bottom-bar {
            right: 0;
            bottom: 0;
            height: 3px;
            width: 3px;
            cursor: nwse-resize;
            z-index: 2;
          }
          &.bottom-bar {
            left: 0;
            bottom: 0;
            height: 2px;
            width: 100% !important;
            cursor: ns-resize;
          }
          &.left-bottom-bar {
            left: 0;
            bottom: 0;
            height: 3px;
            width: 3px;
            cursor: nesw-resize;
            z-index: 2;
          }
          &.left-bar {
            left: 0;
            top: 0;
            height: 100% !important;
            width: 2px;
            cursor: ew-resize;
          }
          &.left-top-bar {
            left: 0;
            top: 0;
            height: 3px;
            width: 3px;
            cursor: nwse-resize;
            z-index: 2;
          }
        }

        .zoomable-content {
          overflow: hidden;
          &-title {
            height: 28px;
            cursor: move;
            background: #f2f2f2;
            line-height: 28px;
            font-weight: 500;
            padding-left: 8px;
          }
          .close {
            float: right;
            height: 28px;
            width: 28px;
            line-height: 28px;
            cursor: pointer;
          }
          :global {
            .react-contextmenu-wrapper {
              height: calc(100% - 28px);
            }
          }
          .stretchable-size {
            height: 100%;
            cursor: default;
            overflow: auto;
            padding: 8px 0;
          }
        }
      }
    }
  }
}

:global {
  .zoomable-dropdown-wrap {
    background: #f2f2f2;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.1);
    .ant-dropdown-menu-item {
      &:hover {
        background-color: #e6fbff !important;
      }
    }
  }
}
